<template>
    <van-nav-bar
    title="选择城市" 
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
  />
  <div v-for="item in city" :key="item">{{item.letter}}
    <p v-for="item1 in item.data" :key="item1">{{item1.name}}</p>
    <router-link to="/" v-for="item1 in item.data" :key="item1"><p>{{item1.name}}</p></router-link>
  </div>
  
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import { useRoute } from "vue-router";
import type { Ref } from "vue";
import { getCity } from '@/api/api';
interface ICity{
  cityId: number,
  name: string,
  pinyin: string,
  isHot: number
}
const cityName:Ref<string>=ref("")
const route = useRoute();
const cityData:Ref<any>=ref([])
const city:Ref<any>=ref([]);
const APICity = async ()=>{
    const res=(await getCity());
    city.value=res;

}

onMounted(() => {
  APICity();
});
</script>

<style></style>